<template>
  <form @submit="formSubmit">
    <div class='depotEnterDetail'>
      <scroll-view scroll-y>
        <div>
        <navHeader v-if="editCode"></navHeader>
        </div>
        <div class="detailList">
          <!-- <div class="weui-cells__title header">确认信息</div> -->
          <div class="weui-cells weui-cells_after-title">
              <div class="weui-cell">
              <div class="weui-cell__bd must">经销商</div>
              <div class="weui-cell__ft searchValue">
                <!-- <input maxlength="50"  name="jingxiaoshang" :value="data.jingxiaoshang" placeholder="选择经销商" /> -->
                  <div>{{GET_DEALER}}</div>
                 <searchTriangle s_value="经销商" v-if="!editCode" type='自采车辆出库申请' :back="true"></searchTriangle>
              </div>
            </div>
              <div class="weui-cell">
              <div class="weui-cell__bd must">车架号</div>
              <div class="weui-cell__ft searchValue">
                <!-- <input maxlength="50" name="chejiahao" :value="data.chejiahao" placeholder="选择车架号" /> -->
                  <div>{{GET_VIN}}</div>
                 <searchTriangle s_value="车架号" v-if="!editCode"  type='自采车辆出库申请' :back="true"></searchTriangle>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">汽车车型</div>
             <div class="weui-cell__ft">汽车车型汽车车型汽车车型汽车车型汽车车型汽车车型汽车车型汽车车型</div>
            </div>

            <div class="weui-cell">
              <div class="weui-cell__bd">指导价/配置</div>
             <div class="weui-cell__ft">配置配置配置配置配置配置配置配置配置配置配置配置配置配置配置配置</div>
            </div>
             <div class="weui-cell">
              <div class="weui-cell__bd must">接车人姓名</div>
              <div class="weui-cell__ft">
                <input maxlength="50" :disabled="editCode"  name="name" :value="data.name" placeholder="填写接车人姓名" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd must">接车人电话</div>
              <div class="weui-cell__ft">
                <input maxlength="50" :disabled="editCode"  name="ipone" :value="data.ipone" placeholder="填写接车人电话" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd must">回款总金额</div>
              <div class="weui-cell__ft">
                <input maxlength="50" :disabled="editCode"  name="jinE" :value="data.jinE" placeholder="手动输入，最多输入50字" />
              </div>
            </div>
             <div class="weui-cell">
              <div class="weui-cell__bd">备注</div>
              <div class="weui-cell__ft">
                <input maxlength="100" :disabled="editCode"  name="beizhu" :value="data.beizhu" placeholder="填写备注" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd must">回款凭证</div>
              <div class="weui-cell__ft">
                <Qinniu :disabled="editCode"  :data="img1"></Qinniu>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">接车人身份证照片</div>
              <div class="weui-cell__ft">
                <Qinniu :disabled="editCode"  :data="img2"></Qinniu>
              </div>
            </div>
          </div>
        </div>
        <view class="btn-area submit">
          <button formType="submit">提交</button>
        </view>
      </scroll-view>
    </div>
  </form>
</template>

<script>
  import Qinniu from '@/components/common/Qinniu'
  import navHeader from "./navHeader.vue"
  import searchTriangle from "@/components/common/searchTriangle"
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        data:{
          // jingxiaoshang:"",
          // chejiahao:"",
          name:"",
          ipone:"",
          jinE:"",
          beizhu:"",
        },
        img1:[],
        img2:[],
        editCode: true, //编辑，还会查看，亦或者是添加
      }
    },
    methods: {
      is_disabled() {
        let code = this.$mp.query.idCode
        switch (true) {
          case code == 1: //编辑
            this.editCode = false;
            break;
          case code == 2: //查看
            this.editCode = true;
            break;
          default:
            this.editCode = false;
            break; //添加
        }
      },
      initValidate() {
        // 验证字段的规则
        const rules = {
          name: {
            required: true
          },
          ipone: {
            required: true
          },
          jinE: {
            required: true
          },

        }

        const message = {
          name: {
            required: " 请填写接车人姓名"
          },
          ipone: {
            required: " 请填写接车人电话"
          },
          jinE: {
            required: " 请填写回款总金额"
          },
        }
        //创建实例对象
        this.WxValidate = new this.wxValidate(rules, message);
      },
      formSubmit: function (e) {
        const params = e.mp.detail.value
        // 传入表单数据，调用验证方法
        if (!this.WxValidate.checkForm(params)) {
          const error = this.WxValidate.errorList[0]
          this.WxValidate.showModal(error)
          return false
        }

         if(!this.GET_VIN){
            this.WxValidate.showModal({msg: '请选择车架号'})
            return false;
        }
        params.chejiaohao = this.GET_VIN ;

        if(!this.GET_DEALER){
            this.WxValidate.showModal({msg: '请选择经销商'})
            return false;
        }
        params.dealer = this.GET_DEALER ;

        if(!this.img1){
            this.WxValidate.showModal({msg: '请选择汇款凭证'})
            return false;
        }
        params.img1 = this.img1 ;
         params.img2 = this.img2 ;




        this.$https.post("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochegnxu/Warehousing_button_post", {params,}).then(res => {
            this.WxValidate.showModal({
              msg: '提交成功',
            })
        })
      },
    },
     mounted() {
      this.initValidate();
      this.is_disabled();
      this.$https.get("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochengxu/WarehousingDetail", {
        id: this.$mp.query.id
      }).then(res => {
          this.data = Object.assign({},this.data,res.data.data);
          this.img1 = res.data.data.imgLIst;
          // this.img2 = res.data.data.imgLIst
      })
    },
    computed:{
      ...mapGetters(["GET_VIN","GET_DEALER"]),
    },
    components: {
      Qinniu,navHeader,searchTriangle
    }
  }
</script>


<style lang="scss" scoped>
  .depotEnterDetail {
    height: 100%;
    box-sizing: border-box;
    scroll-view {
      height: 100%;
    
    }

  
    
  }
</style>
